<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<html lang="en">
<h:head>

	<title>Dashboard Viisi</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Dashboard Viisi" />
	<meta name="author" content="Viisi Tecnologia" />

	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

	<!-- CSS - inicio -->
	<h:outputStylesheet name="bootstrap.min.css" target="head" library="css" />
	<h:outputStylesheet name="bootstrap-responsive.min.css" target="head" library="css" />
	<h:outputStylesheet name="dashboard.main.css" target="head"	library="css" />
	<h:outputStylesheet name="login.css" target="head" library="css" />
	<!-- CSS - fim -->

</h:head>

<h:body>
		
		<p:growl id="growl" widgetVar="msgs" showDetail="true" autoUpdate="true" showSummary="true" redisplay="true" life="10000" />
		
		 <div id="logo">
            <img src="#{resource['img/viisi_logo.png']}" alt="Viisi Tecnologia" />
        </div>
        
        <div id="loginbox">            
            <h:form id="loginform" class="form-vertical">
				<p>Para continuar informe seu usuário e senha.</p>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <p:inputText value="#{credentials.username}" /> 
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-lock"></i></span>
                            <p:password value="#{credentials.password}" /> 
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <span class="pull-left"><a href="#" class="flip-link" id="fliptorecover">Esqueceu a senha?</a></span>
                    <span class="pull-right">
                    	<h:commandButton styleClass="btn btn-inverse" value="Autenticar" action="#{identity.login()}" />
                    </span>
                </div>
            </h:form>
            
            <form id="recoverform" action="#" class="form-vertical">
				<p>Informe o seu endereço de email abaixo que enviaremos instruções de como recuperar a sua senha.</p>
				<div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span><input type="text" placeholder="E-mail address" />
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <span class="pull-left"><a href="#" class="flip-link" id="fliptologin">&lt; Back to login</a></span>
                    <span class="pull-right"><input type="submit" class="btn btn-inverse" value="Recover" /></span>
                </div>
            </form>
        </div>
        
        <script>
			$(function(){

				// Checking for CSS 3D transformation support
				$.support.css3d = supportsCSS3D();

				var formContainer = $('#loginbox');

				// Listening for clicks on the ribbon links
				$('.flip-link').click(function(e){

					// Flipping the forms
					formContainer.toggleClass('flipped');

					// If there is no CSS3 3D support, simply
					// hide the login form (exposing the recover one)
					if(!$.support.css3d){
						$('#loginform').toggle();
					}
					e.preventDefault();
				});

				// A helper function that checks for the
				// support of the 3D CSS3 transformations.
				function supportsCSS3D() {
					var props = [
						'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
					], testDom = document.createElement('a');

					for(var i=0; i &lt; props.length; i++){
						if(props[i] in testDom.style){
							return true;
						}
					}

					return false;
				}
			});        
        </script>  
	
	<!-- JS - inicio -->
	<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
	<h:outputScript name="bootstrap.min.js" target="body" library="js" />
	<!-- JS - fim -->

</h:body>
</html>
</ui:composition>